<template>
  <!-- Main content -->
  <section class="content">
    <!-- GitHub hint -->
    <div class="row">
      <div class="col-xs-12">
        <alert :dismissible="true"
               type="success"
               :iconClasses="['fa', 'fa-check']"
               title="Project address">
          <span>Click on icon to check it out.</span>
          <a href="#" target="_blank">
            <!-- <i class="fa fa-github fa-2x"></i> -->
            <i class="fa fa-location-arrow"></i>
          </a>
        </alert>
      </div>

      <!-- Info boxes -->
      <div class="col-md-3 col-sm-6 col-xs-12">
        <router-link to="/">
        <info-box color-class="bg-aqua"
                  :icon-classes="['ion', 'ion-ios-home']"
                  text="."
                  number="Home"></info-box>
        </router-link>
      </div>
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-xs-12">
        <router-link to="/data">
        <info-box color-class="bg-yellow"
                  :icon-classes="['ion', 'ion-ios-pie']"
                  text="."
                  number="Data Analysis"></info-box>
        </router-link>
      </div>
      <!-- /.col -->

      <!-- fix for small devices only -->
      <div class="clearfix visible-sm-block"></div>
      
      <div class="col-md-3 col-sm-6 col-xs-12">
        <router-link to="sentiment">
        <info-box color-class="bg-red"
                  :icon-classes="['ion', 'ion-ios-pulse-strong']"
                  text="."
                  number="Sentiment Analysis"></info-box>
        </router-link>
      </div>
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-xs-12">
        <info-box color-class="bg-green"
                  :icon-classes="['ion', 'ion-chatbubbles']"
                  text="."
                  number="Contact Me"></info-box>
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->

    <div class="col-xs-12">
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title"></h3>
          <div class="box-body">
            <div class="col-sm-6 col-xs-12">
              <p class="text-center">
                <strong>Film Circulation in each year</strong>
              </p>
              <canvas id="trafficBar" ></canvas>
            </div>
            <hr class="visible-xs-block">
            <div class="col-sm-6 col-xs-12">
              <p class="text-center">
                <strong>Proportion of each year</strong>
              </p>
              <canvas id="typePie"></canvas>
            </div>
          </div>
        </div>
        <div class="text-center">
          <small><b>Pro Tip</b> Don't forget to star us on github!</small>
        </div>
      </div>
    <!-- </div> -->
    <!-- /.row -->

    <!-- Main row -->
    <!-- <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <process-info-box color-class="bg-yellow"
                          :icon-classes="['ion', 'ion-ios-pricetag-outline']"
                          text="Inventory"
                          number="5,200"
                          :progress="50"
                          description="50% increase since May"></process-info-box>
      </div> -->
      <!-- /.col -->
      <!-- <div class="col-md-3 col-sm-6 col-xs-12">
        <process-info-box color-class="bg-green"
                          :icon-classes="['ion', 'ion-ios-heart-outline']"
                          text="Mentions"
                          number="92,050"
                          :progress="20"
                          description="20% increase in 30 days"></process-info-box>
      </div> -->
      <!-- /.col -->
      <!-- <div class="col-md-3 col-sm-6 col-xs-12">
        <process-info-box color-class="bg-red"
                          :icon-classes="['ion', 'ion-ios-cloud-download-outline']"
                          text="Downloads"
                          number="114,381"
                          :progress="70"
                          description="70% increase since yesterday"></process-info-box>
      </div> -->
      <!-- /.col -->
      <!-- <div class="col-md-3 col-sm-6 col-xs-12">
        <process-info-box color-class="bg-aqua"
                          :icon-classes="['ion', 'ion-ios-chatbubble-outline']"
                          text="Direct Messages"
                          number="163,921"
                          :progress="40"
                          description="40% increase compared to last year"></process-info-box>
      </div> -->
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </section>
  <!-- /.content -->
</template>

<script>
import Chart from 'chart.js'
import Alert from '../widgets/Alert'
import InfoBox from '../widgets/InfoBox'
import ProcessInfoBox from '../widgets/ProcessInfoBox'

export default {
  name: 'Dashboard',
  components: {
    Alert,
    InfoBox,
    ProcessInfoBox
  },
  data () {
    return {
      generateRandomNumbers (numbers, max, min) {
        var a = []
        for (var i = 0; i < numbers; i++) {
          a.push(Math.floor(Math.random() * (max - min + 1)) + max)
        }
        return a
      }
    }
  },
  computed: {
    coPilotNumbers () {
      return this.generateRandomNumbers(12, 1000000, 10000)
    },
    personalNumbers () {
      return this.generateRandomNumbers(12, 1000000, 10000)
    },
    isMobile () {
      return (window.innerWidth <= 800 && window.innerHeight <= 600)
    }
  },
  mounted () {
    this.$nextTick(() => {
      var ctx = document.getElementById('trafficBar').getContext('2d')
      var config = {
        type: 'line',
        data: {
          labels: ['2021', '2020', '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000'],
          datasets: [{
            label: 'Film Circulation',
            fill: false,
            borderColor: '#284184',
            pointBackgroundColor: '#284184',
            backgroundColor: 'rgba(0, 0, 0, 0)',
            data: [3, 1, 5, 10, 1, 8, 1, 4, 2, 2, 3, 7, 4, 4, 2, 2, 2, 5, 1, 3, 3, 1]
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: !this.isMobile,
          legend: {
            position: 'bottom',
            display: true
          },
          tooltips: {
            mode: 'label',
            xPadding: 10,
            yPadding: 10,
            bodySpacing: 10
          }
        }
      }

      new Chart(ctx, config) // eslint-disable-line no-new

      var pieChartCanvas = document.getElementById('typePie').getContext('2d')
      var pieConfig = {
        type: 'pie',
        data: {
          labels: ['剧情', '冒险', '喜剧', '奇幻', '爱情', '动作', '动画', '犯罪', '科幻', '惊悚', '悬疑', '传记', '家庭', '战争', '历史', '音乐', '歌舞', '古装'],
          datasets: [{
            data: [67, 30, 28, 24, 23, 17, 16, 16, 14, 11, 8, 6, 5, 5, 4, 4, 3, 3],
            backgroundColor: ['#00a65a', '#f39c12', '#00c0ef', 'aqua', 'beige', 'cadetblue', 'chocolate', 'crimson', 'cornsilk', 'purple', 'yellowgreen', 'sienna', 'lightpink', 'red', 'brown', 'lightgreen', 'royalblue', 'black'],
            hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: !this.isMobile,
          legend: {
            position: 'bottom',
            display: true
          }
        }
      }

      new Chart(pieChartCanvas, pieConfig) // eslint-disable-line no-new
    })
  }
}
</script>
<style>
.info-box {
  cursor: pointer;
}
.info-box-content {
  text-align: center;
  vertical-align: middle;
  display: inherit;
}
.fullCanvas {
  width: 100%;
}
</style>
